ztree实现中国省市区树形，可多选 |
您所在的位置：网站首页 › ztree getnodebytid › ztree实现中国省市区树形，可多选 |
|
首先表 CREATE TABLE `sys_area` ( `id` INT(11) NOT NULL COMMENT '编号', `parent_id` INT(11) NOT NULL COMMENT '父级编号', `parent_ids` VARCHAR(100) NOT NULL DEFAULT '' COMMENT '所有父级编号', `code` VARCHAR(20) NOT NULL DEFAULT '' COMMENT '区域编码', `name` VARCHAR(20) NOT NULL DEFAULT '' COMMENT '区域名称', `type` VARCHAR(1) NOT NULL DEFAULT '' COMMENT '区域类型', `is_municipality` VARCHAR(1) NOT NULL DEFAULT 'N' COMMENT '是否直辖市', `active_flag` VARCHAR(1) NOT NULL DEFAULT '0' COMMENT '删除标记', `remarks` VARCHAR(255) NULL DEFAULT NULL COMMENT '备注信息', `create_by` VARCHAR(64) NULL DEFAULT NULL COMMENT '创建者', `create_date` DATETIME NULL DEFAULT NULL COMMENT '创建时间', `update_by` VARCHAR(64) NULL DEFAULT NULL COMMENT '更新者', `update_date` DATETIME NULL DEFAULT NULL COMMENT '更新时间', PRIMARY KEY (`id`), INDEX `sys_area_parent_id` (`parent_id`), INDEX `sys_area_parent_ids` (`parent_ids`), INDEX `sys_area_code` (`code`), INDEX `type_name` (`type`, `name`(2)) ) COMMENT='区域表'
后台写SQL组装省市区树形结构 select id,parent_id,name,code,type from ( select t1.id,t1.parent_id,t1.name,t1.code,t1.type, if(find_in_set(parent_id, @pids) > 0, @pids := concat(@pids, ',', id), 0) as ischild from ( select id,parent_id,name,code,type from sys_area t order by parent_id, id ) t1, (select @pids := 1) t2 ) t3 where ischild != 0;SQL解释可以看https://www.cnblogs.com/rainydayfmb/p/8028868.html 楼主起先用的resultMap里面返回一个父级和子级，数据量小的时候完全没问题，但是省市区将近4000条数据，用这种查询差不多要100秒，GG 所以改为递归查询，看下查询用时 只需要0.671秒对比下100秒
然后就是前台接收数据，用ztree形成树 $(document).ready(function() { loadTree(); }); function loadTree(){ var data = []; data = data.concat(${templateAreaList}); loadTreeData(data); } function loadTreeData(data) { var setting = { check: { enable: true, chkStyle: "checkbox", chkboxType: { "Y": "p", "N": "s" }//勾选操作，只影响父级节点；取消勾选操作，只影响子级节点 }, view: { dblClickExpand: false, }, data: { simpleData: { enable: true } }, callback: { onClick: onTreeClick, } }; $.fn.zTree.init($("#ztree"), setting, data); var zTree = $.fn.zTree.getZTreeObj("ztree"); // 业务，默认不展开节点 // 实现，先展开节点，在关闭，否则取不到子节点信息 // 展开全部节点 zTree.expandAll(true); // 关闭全部节点 zTree.expandAll(false); // node：树形节点 // expandFlag:是否展开节点 // sonSign：是否展开其子孙节点 // focus：展开或折叠节点后是否设置焦点 // callbackFlag：这行该方法是否触发回调函数 //zTree的expandNode (node, expandFlag, sonSign, focus, callbackFlag) zTree.expandNode(zTree.getNodeByTId(""), true, true, true, false); }function onTreeClick(event, treeId, treeNode, clickFlag){ } function getData() {} 省市区多选数据回显 思路：假如我选择了河北省石家庄市长安区，福建省厦门市，浙江省，这三个地址,那么我只需要获取长安区，厦门市，以及浙江省，这三个地址的code，再根据code去查找他们的父级，也就是根据勾选数据中的子节点，来获取他们的父节点信息。 function getData() { //获取树对象 var zTree = $.fn.zTree.getZTreeObj("ztree"); if (null != zTree) { //获取选中节点的值，遍历 treeArray = zTree.getCheckedNodes(true); if (treeArray.length != 0) { var tree = []; for (var i = 0; i < treeArray.length; i++) { var childrenNodes = treeArray[i].children; var parentNodes = treeArray[i].getParentNode(); if(null == childrenNodes || childrenNodes == "" || childrenNodes == "undefined"){ //区县 tree.push(treeArray[i]); continue; }else if(null == parentNodes || parentNodes == "" || parentNodes == "undefined"){ //省 var provinceFlag = true; for (var j = 0; j < childrenNodes.length; j++) { if(childrenNodes[j].checked != "undefined" && childrenNodes[j].checked == true){ // 子节点被勾选 provinceFlag = false; continue; } } if(provinceFlag == true){ tree.push(treeArray[i]); } }else{ //市 var cityflag = true; for (var k = 0; k < childrenNodes.length; k++) { if(childrenNodes[k].checked != "undefined" && childrenNodes[k].checked == true){ // 子节点被勾选 cityflag = false; continue; } } if(cityflag == true){ tree.push(treeArray[i]); } } } return tree; } } } 看下效果
接着就是再点击行政区划地址信息回显，并勾选 function loadTreeData(data) { ...... // loadTreeDate增加数据回显方法// 数据勾选回显 var treeCode = '${treeCode}';//参数 if(null != treeCode && treeCode != ""){ var treeCodeArr = treeCode.split(","); for(var data of treeCodeArr) { // 获取回传的参数 var nodes = zTree.getNodesByParam("allIdx", data, null); // 根据回传参数勾选数据 zTree.checkNode(nodes[0], true, true); } } }
|
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |